<template>
<div class="beauty-article">
	<ul :style="{width:width+'px'}">
		<li>
			<div class="img-container pic-container">
					<img src="../../../static/img/banner.png" alt="">
			</div>
			<div class="info">
					<p>标题发射点发发大水范德萨范德萨发达</p>
					<div>
						<div>
							<div class="img-container head-container">
								<img src="../../../static/img/banner.png" alt="">
							</div>
							<i>医汇云整形</i>
						</div>
						<span>2019-09-09</span>
					</div>
			</div>
		</li>
		<li>
			<div class="img-container pic-container">
					<img src="../../../static/img/banner.png" alt="">
			</div>
			<div class="info">
					<p>标题发射点发发大水范德萨范德萨发达</p>
					<div>
						<div>
							<div class="img-container head-container">
								<img src="../../../static/img/banner.png" alt="">
							</div>
							<i>医汇云整形</i>
						</div>
						<span>2019-09-09</span>
					</div>
			</div>
		</li>
		<li>
			<div class="img-container pic-container">
					<img src="../../../static/img/banner.png" alt="">
			</div>
			<div class="info">
					<p>标题发射点发发大水范德萨范德萨发达</p>
					<div>
						<div>
							<div class="img-container head-container">
								<img src="../../../static/img/banner.png" alt="">
							</div>
							<i>医汇云整形</i>
						</div>
						<span>2019-09-09</span>
					</div>
			</div>
		</li>
		<li>
			<div class="img-container pic-container">
					<img src="../../../static/img/banner.png" alt="">
			</div>
			<div class="info">
					<p>标题发射点发发大水范德萨范德萨发达</p>
					<div>
						<div>
							<div class="img-container head-container">
								<img src="../../../static/img/banner.png" alt="">
							</div>
							<i>医汇云整形</i>
						</div>
						<span>2019-09-09</span>
					</div>
			</div>
		</li>
	</ul>

</div>
</template>
<script>
	export default{
		props:{
			width:{
				default:1240,
				type:Number,String
			}
		}
	}
</script>
<style lang="less" scoped>
	.beauty-article{
		overflow: hidden;
	}
	ul{
		padding-top: 10px;
		overflow: hidden;
		li{
			float: left;
			width: 270px;
			margin-right: 40px; 
			font-size: 12px;
			.pic-container{
				height: 196px;
			}
			&:hover{
				transform: scale(1.03);
				transition: all 0.5s;
			}
			.info{
				width: 254px;
				padding: 10px;
				margin: 0 auto;
				margin-bottom: 40px;
				position: relative;
				top: 20px;
				box-shadow: 0 10px 15px 1px rgba(0,0,0,0.05);
				p{
					line-height: 26px;
					height: 52px;
					font-size: 12px;
					overflow: hidden;
				}
				>div{
					overflow: hidden;
					margin-top: 20px;
					div{
						float: left;
					}
				}
				.head-container{
					display: inline-block;
					width: 30px;
					height: 30px;
					border-radius: 15px;
				}
				i{
					vertical-align: middle;
					margin-left: 10px;
					font-size: 12px;
				}
				span{
					float: right;
					font-size: 12px;
				}
			}
		}
	}
</style>

